<template>
	<view>
		<view class="top-back">
			<view class="top-name">冲突管理</view>
			<view class="top-num">({{totleCount}})</view>
			<view class="top-right top-right-left" @click="clickAddAction">
				<view class="top-exit">新增</view>
			</view>

			<view class="top-right" @click="importAction">
				<view class="top-exit top-insert">导入</view>
			</view>
			<view class="top-right" @click="exportAction">
				<view class="top-exit top-insert">导出</view>
			</view>

			<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
				<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
				<image v-if="!screenSelect" class="top-icon" src="../../../../static/select.png"></image>
				<image v-if="screenSelect" class="top-icon" src="../../../../static/select_select.png"></image>

			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText=" ">
				<uni-tr>
					<uni-th align="center">类型</uni-th>
					<uni-th align="center">冲突词</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center"><text selectable="true">{{ item.classify.name }}</text></uni-td>
					<uni-td align="center"><text selectable="true">{{ item.name }}</text></uni-td>

					<uni-td align="center">
						<view style="display: flex;justify-content: center;">
							<view class="item-blue-text" @click="clickEditAction(item)">编辑</view>
							<view style="margin-left: 12px;" class="item-blue-text" @click="delAction(item)">删除</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="search-back" v-if="tableData.length == 0">
				<image class="search-image" :src="pc_search_nodata"></image>
				<view class="search-noresult">没有查询到结果</view>
			</view>
		</view>
		<conflictImport v-on:successBack='updataRequest()' :editType='editType' v-if="showImport"
			@importClientClose='clickImportClientClose'></conflictImport>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="popData" style="width:200px;">
					<uni-forms-item>
						<uniselect v-model="popData.classifyId" placeholder='类型' :localdata="typeRange"
							@change="typeChange" :clear="false">
						</uniselect>
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="popData.name" placeholder="冲突词" />
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
		</popSelect>
		<popSelect v-model="showMessage" :x="x" :y="y" placement="top-end" dynamic>
			<view>
				<view class="pop-item" @click="importAddAction">导入新增</view>
				<view class="pop-item" @click="importReplaceAction">导入替换</view>
			</view>
		</popSelect>
		<conflictAdd v-if="showAddClass" :selectItem='selectItem' :editType='editType'
			v-on:successBack='updataRequest()' :typeRange='typeRange' :classArr='classArr'
			@addConflictClose='clickAddConflictClose'></conflictAdd>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import conflictImport from "@/packageB/PC/consultMange/conflictManage/conflictImport.vue"
	import popSelect from '@/components/popSelect/popSelect.vue'
	import uniselect from "@/packageB/PC/components/uni-data-select/uni-data-select.vue"
	import conflictAdd from "@/packageB/PC/consultMange/conflictManage/conflictAdd.vue"
	export default {
		components: {
			conflictImport,
			popSelect,
			uniselect,
			conflictAdd
		},
		data() {
			return {
				showImport: false,
				tableData: [],
				totleCount: 0, //总数
				classArr: [],

				screenx: 0,
				screeny: 0,
				showScreen: false,
				popData: {
					name: '',
					classifyId: '',
				},
				screenSelect: false,
				typeRange: [],
				showAddClass: false,
				editType: 'add',
				selectItem: {},
				x: 0,
				y: 0,
				showMessage: false,
				editType: 'add',
				pc_search_nodata:getApp().globalData.baseImageUrl+'/pc_search_nodata.png'
			}

		},
		onLoad() {

		},
		mounted() {
			this.requestData();
			this.requestClassData();
			this.requestDicData();
		},
		methods: {
			//网络请求示例
			async requestData() {
				let _this = this

				let parmas = {
					'classifyId': _this.popData.classifyId,
					"name": _this.popData.name,
					size: '1000'
				}
				const res = await this.$myRequest({
					url: "/admin/clash/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.totleCount = res.data.data.count
					_this.tableData = res.data.data.list
				}
			},

			//分类网络请求
			async requestClassData() {
				let _this = this
				let parmas = {size: '1000'};

				const res = await this.$myRequest({
					url: "/admin/clash/classify",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.classArr = res.data.data.list;
					_this.typeRange = [];
					for (var i = 0; i < _this.classArr.length; i++) {
						var item = {
							value: _this.classArr[i].id,
							text: _this.classArr[i].name
						};
						_this.typeRange.push(item);
					}
				}
			},

			//公共dic请求
			async requestDicData() {
				let _this = this
				let parmas = {size: '1000'};

				const res = await this.$myRequest({
					url: "/comm/dict/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

				}
			},
			async updataRequest() {
				this.requestData()
			},
			//新增
			clickAddAction() {
				this.editType = 'add';
				this.showAddClass = true;
			},
			//编辑
			clickEditAction(item) {
				this.editType = 'edit'
				this.selectItem = item
				this.showAddClass = true;
			},
			clickAddConflictClose() {
				this.showAddClass = false;
			},
			//导入
			importAction(e) {
				console.log(e)
				this.x = e.touches[0].clientX
				this.y = e.touches[0].clientY + 4
				this.showMessage = !this.showMessage
			},
			//导入新增	
			importAddAction() {
				this.editType = 'add'
				this.showMessage = false;
				this.showImport = true;
			},
			//导入替换
			importReplaceAction() {
				this.editType = 'replace'
				this.showMessage = false;
				this.showImport = true;
			},

			clickImportClientClose() {
				this.showImport = false;
			},
			//导出
			exportAction() {
				var wxflie = uni.getFileSystemManager();
				var _this = this;
				uni.downloadFile({
					url: getApp().globalData.baseUrl + "/admin/clash/export",
					header: {
						"Content-Type": "application/x-xls",
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
					},
					success: function(res) {
						wx.hideLoading();
						console.log(res)
						wxflie.saveFile({
							tempFilePath: res.tempFilePath,
							filePath: `${wx.env.USER_DATA_PATH}/冲突管理.xls`,
							success: (res1) => {
								console.log(res1)
								wx.saveImageToPhotosAlbum({
										filePath: res1.savedFilePath,
									}).then(save => {
										console.log('导出成功', save)
										wx.showToast({
											title: '导出成功',
											icon: 'success',
											duration: 2000
										})
									})
									.catch(error => {
										console.log('保存失败', error)
									})
							}
						})
					},
					fail: function(err) {
						wx.hideLoading();
						console.log('下载失败：', err);
					},
				});
				
				
				// uni.downloadFile({
				// 	url: getApp().globalData.baseUrl + "/admin/clash/export",
				// 	header: {
				// 		"Content-Type": "application/x-xls",
				// 		"Authorization": "Basic ZG90Z286ZG90Z28=",
				// 		"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
				// 	},
				// 	success: function(res) {
				// 		wx.hideLoading();
				// 		wx.saveImageToPhotosAlbum({
				// 			filePath: res.tempFilePath,
				// 		}).then(save => {
				// 			console.log('保存成功', save)
				// 		}).catch(error => {
				// 			console.log('保存失败', error)
				// 		})
				// 	},
				// 	fail: function(err) {
				// 		wx.hideLoading();
				// 		console.log('下载失败：', err);
				// 	},
				// });
			},
			delAction(item) {
				this.selectItem = item;
				this.$refs.alertDialog.open()
			},
			async dialogConfirm() {
				console.log('点击确认')
				let _this = this

				let parmas = {
					'ids': this.selectItem.id,
				}
				const res = await this.$myRequest({
					url: "/comm/dict",
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestData()
				}
			},

			dialogClose() {
				console.log('点击关闭')
			},

			//点击筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},

			//筛选重置
			selectReset() {
				this.popData = {
					name: '',
					classifyId: '',
				};
				this.screenSelect = false;
				this.requestData();

			},
			//类型选择
			typeChange(e) {
				console.log(e)
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen
				this.requestData()
			},
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}



	.top-content-select {
		color: #2DA9C5;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}


	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-insert {
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.pop-item {
		margin: 10px;
		color: #2DA9C5;
	}
</style>
